<template>
  <div>
    <n-card :bordered="false" class="fromCard">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="tableCard">
      <BasicTable
        :bordered="false"
        :columns="columns"
        :request="viewList"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <div
            style="
              border: 2px solid #2d8cf0;
              height: 32px;
              margin-right: 5px;
              background-color: #2d8cf0;
            "
          ></div>
          <p style="font-size: 15px">退款查询表格</p>
        </template>
      </BasicTable>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { h, reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Formrefund/index';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { CreditCardOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { refundapplyList } from '@/api/refundapply/list';
import components from '@/layout/components/Header/components';
import formatDate from '@/utils/timestamp';
import { createStorage } from '@/utils/Storage';
const Storage = createStorage({ storage: localStorage });

let authorityJson = Storage.get('OPERATORLIST');
const authority = JSON.parse(authorityJson);

function reloadTable() {
  actionRef.value.reload();
}


const handleSubmit = (values: Recordable) => {
  reloadTable();
};
const handleReset = () => {
  parms.value.memNo = '';
  parms.value.status = '';
  parms.value.prodOrdNo = '';
  parms.value.payeeOrdNo = '';
  parms.value.startTime = '';
  parms.value.endTime = '';
  reloadTable();
};

const parms = ref({
  memNo: '',
  status: '',
  prodOrdNo: '',
  payeeOrdNo: '',
  startTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10,
});
const jurisdiction = ref({});
const viewList = async (res) => {
  parms.value.pageNum = res.page;
  parms.value.pageSize = res.pageSize;
  let data = await refundapplyList(parms.value);
  jurisdiction.value = data.data.body.list;
  data.data.body.list.forEach((val) => {
    // val.ccy = 'HPC'
    // val.refundDte = formatDate(new Date(val.refundDte));
    if (val.status == '0') {
      val.status = '退款成功';
    } else {
      val.status = '退款失败';
    } 
  });
  let datas = {
    list: data.data.body.list,
    page: data.data.body.page,
    pageSize: data.data.body.pageSize,
    pageCount: Math.ceil(data.data.body.total / res.pageSize),
  };
  console.log(data);
  console.log(datas);
  console.log(jurisdiction.value);

  return datas;
};

const schemas = [
  {
    field: 'startTime',
    component: 'NDatePicker',
    label: '申请日期：',
    componentProps: {
      closeOnSelect:true,
      updateValueOClose:true,
      type: 'daterange',
      actions:['confirm'],
      clearable:false,
      onUpdateValue: (e: any) => {
        parms.value.startTime = e[0];
        parms.value.endTime = e[1] + 1000*60*60*24 - 1;
      },
    },
  },
  {
    field: 'memNo',
    component: 'NInput',
    label: '会员号：',
    componentProps: {
      maxlength: 20,
      placeholder: '请输入会员号',
      onInput: (e: any) => {
        parms.value.memNo = e;
        console.log(e); // 交易会员姓名
      },
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '退款处理状态：',
    componentProps: {
      placeholder: '请选择',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '退款成功',
          value: 0,
        },
        {
          label: '退款失败',
          value: 1,
        },
      ],
      onUpdateValue: (e: any) => {
        console.log(e);
        parms.value.status = e;
      },
    },
  },
  {
    field: 'prodOrdNo',
    component: 'NInput',
    label: '商品订单号：',
    componentProps: {
      maxlength: 20,
      placeholder: '请输入商品订单号',
      onInput: (e: any) => {
        parms.value.prodOrdNo = e;
        console.log(e); // 交易会员姓名
      },
    },
  },
];

const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();

const showModal = ref(false);
const formBtnLoading = ref(false);
const formParams = reactive({
  name: '',
  address: '',
  date: null,
});

const params = ref({
  pageSize: 5,
  // name: 'xiaoMa',
});

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});

const loadDataTable = async (res) => {
  return await getTableList({ ...res, ...formParams, ...params.value });
};
</script>

<style lang="less" scoped>
.fromCard {
  margin-top: 12px;
  border: 1px solid rgb(226, 229, 229);
  margin-bottom: 8px;
}
.tableCard {
  border: 1px solid rgb(226, 229, 229);
}
.refuseButton {
  position: absolute;
  bottom: 20px;
  right: 30px;
}
.refuseButtonNo {
  position: absolute;
  bottom: 20px;
  right: 100px;
}
</style>
